/*
 * @Author: Joursion
 * @Date: 2018-06-15 17:26:17
 * @Last Modified by: Joursion
 * @Last Modified time: 2018-09-03 17:43:02
 */

import React, { Component } from 'react';
import {
    View,
    Image,
    Dimensions,
    StyleSheet,
    Text,
    ImageBackground,
    TouchableHighlight,
    Animated,
} from 'react-native';
import { connect } from 'react-redux';


import ListItem from '../components/ListItem';

const { width } = Dimensions.get('window');
import { ROUTERMAP, TABBAR_LABEL, Global, API_MAP } from '../util/constants';
import { scaleSize, scaleFontSize } from '../util/size';
import icons from '../util/icons';
import * as userAction from '../actions/user';
import { IReduxUserInfo, INavigation } from '../interface';
import { request } from '../util';

interface IProps {
    user: IReduxUserInfo,
    logout: Function,
    navigation: INavigation,
}

interface IState {
    userInfo?: Object,
    userName?: string,
    number?: string,
    visiable: 'flex' | 'none',
    fadeAnim: Animated.Value,
    [key: string]: any,
}

class User extends Component<IProps, IState> {

    constructor(props) {
        super(props);
        this.state = {
            userInfo: {},
            userName: '123456ufu',
            visiable: 'none',
            fadeAnim: new Animated.Value(-width),
        }
    }

    static navigationOptions = {
        tabBarLabel: TABBAR_LABEL.user,
        tabBarIcon: ({ focused, tintColor }) => {
            if (focused) {
                return (
                    <Image source={icons.tabUserO} style={Global.tabIconStyles} />
                );
            }
            return (
                <Image source={icons.tabUser} style={Global.tabIconStyles} />
            );
        },
    };

    chkPrice = (obj?: string) => { //方法1
        console.log('startObj', obj)
        if (obj) {
            obj = obj.replace(/[^\d.]/g, "");
            //必须保证第一位为数字而不是. 
            obj = obj.replace(/^\./g, "");
            //保证只有出现一个.而没有多个. 
            obj = obj.replace(/\.{2,}/g, ".");
            //保证.只出现一次，而不能出现两次以上 
            obj = obj.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
            console.log('after obj', obj);
            return obj;
        }
        return '';
    }

    componentDidMount() {

    }

    turnToPage = (pageName: string, params?: Object | null) => {
        this.props.navigation.navigate(pageName, params);
    };

    // onPress = () => {
    //     let { visiable } = this.state;
    //     console.log('onPress', visiable);
    //     if (visiable === 'flex') {
    //         Animated.timing(this.state.fadeAnim, { toValue: -width, duration: 500 }).start();
    //         this.setState({ visiable: 'none' });
    //     } else {
    //         Animated.timing(this.state.fadeAnim, { toValue: 0, duration: 500 }).start();
    //         this.setState({ visiable: 'flex' });
    //     }
    // }


    renderUserInfo = () => {
        let { name } = this.props.user;
        if (name) {
            return (
                <View style={[styles.userInfo, {
                    height: scaleSize(150),
                    backgroundColor: 'blue',
                }]}>
                    <ImageBackground source={icons.backgroundUser} style={{ height: scaleSize(150), }}>
                        <View style={[{
                            display: 'flex',
                            flexDirection: 'row',
                            marginTop: scaleSize(75),
                            paddingLeft: scaleSize(23),
                        }]}>
                            {/* <TouchableHighlight onPress={this.onPress}> */}
                                <View style={styles.userAvator}>
                                    <Image style={styles.userAvator} source={icons.avatar} />
                                </View>
                            {/* </TouchableHighlight> */}
                            <Text style={{
                                paddingLeft: scaleSize(20),
                                lineHeight: scaleSize(52),
                                fontFamily: 'PingFangSC-Medium',
                                fontSize: scaleFontSize(18),
                                color: '#FFFFFF',
                            }}> {name}</Text>
                        </View>
                    </ImageBackground>
                </View>
            )
        } else {
            return (
                <View style={[styles.userInfo, {
                    height: scaleSize(150),
                }]}>
                    <ImageBackground source={icons.backgroundUser} style={{ height: scaleSize(150), }}>
                        <View style={[{
                            display: 'flex',
                            flexDirection: 'row',
                            marginTop: scaleSize(75),
                            paddingLeft: scaleSize(23),
                        }]}>

                            <Text style={{
                                fontSize: scaleFontSize(20),
                                color: '#FFFFFF'
                            }} onPress={() => this.turnToPage(ROUTERMAP.login)}>登录</Text>

                            <Text style={{
                                fontSize: scaleFontSize(20),
                                color: '#FFFFFF',
                                paddingLeft: scaleSize(20),
                            }} onPress={() => this.turnToPage(ROUTERMAP.register)}>注册</Text>
                        </View>
                    </ImageBackground>
                </View>
            )
        }

    }

    render() {
        let { name } = this.props.user;
        return (
            <View style={styles.container}>
                {
                    this.renderUserInfo()
                }
                
                <View style={[
                    {
                        justifyContent: 'center',
                        alignItems: 'center',
                        marginTop: scaleSize(15),
                    }
                ]}>
                    <ListItem icon={icons.userBalance} text={"我的持仓"} handleClick={
                        () => {
                            this.turnToPage(ROUTERMAP.balance);
                        }
                    } />
                     <ListItem icon={icons.userBalance} text={"银行钱包"} handleClick={
                        () => {
                            this.turnToPage(ROUTERMAP.exchangeBalance);
                        }
                    } />
                    <ListItem icon={icons.userOrder} text={"所有订单"} handleClick={
                        () => {
                            // this.turnToPage(ROUTERMAP.test1, null)
                        }
                    } />
                    <ListItem icon={icons.userAbout} text={"关于我们"} handleClick={
                        () => {
                            this.turnToPage(ROUTERMAP.about, null)
                        }
                    } />
                    {
                        name ? (
                            <ListItem text={'退出登录'} handleClick={() => {
                                request(API_MAP.logout, {
                                    method:'POST',
                                }, false, (err, res) => {
                                    if (res.retCode == '00') {
                                        if (this.props.logout) {
                                            this.props.logout();
                                        }
                                    }
                                })
                            }} />
                        ): null
                    }
                </View>
            </View>
        )
    }
}

export default connect(
    (state) => ({
        user: state.user,
    }),
    (dispatch) => ({
        logout: () => dispatch(userAction.Logout()),
    })
)(User);

const styles = StyleSheet.create({
    container: {
        backgroundColor: '#FFFFFF',
        flex: 1,
        flexDirection: 'column',
        width: width
    },
    userInfo: {
        width: width,
        height: 50
    },
    listItem: {
    },
    userAvator: {
        width: scaleSize(52),
        height: scaleSize(52),
        borderRadius: scaleSize(26),
    }
})